<template>
<div class="components-page">
  <div class="title-bg">产能负荷统计图</div>
  <div class="barChart" ref="barChart"></div>
</div>
</template>

<script>
export default {
  data() {
    return {
      myBarChart: null,
      barChartOptions: {
        color: [ "#56CCF2", "#EB6F49"],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        //图例
        legend: {
          data: ['负荷', '理论日产能'],
          right: '0',
          textStyle: {
            color: '#ffffff' // 图例文字颜色
          },
        },
        grid: {
          left: '3%',
          right: '5%',
          top: '30%',
          bottom: '0%',
          containLabel: true
        },
        calculable: true,
        xAxis: [{
          type: 'category',
           axisLabel: {
            color: "#ffffff",
            fontSize: "12",
          },
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }],
        yAxis: [{
          type: 'value',
           axisLabel: {
            color: "#ffffff",
            fontSize: "12",
          },
          lineStyle: {
            color: "rgba(255,255,255,.1)",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
        }}],
        series: [
       {
            name: '理论日产能',
            type: 'bar',
            label: {
              show: true, //开启显示
              position: 'top', //在上方显示
              textStyle: { //数值样式
                color: '#F2E556',
                fontSize: 16
              }
            },
            data: [],
            barWidth: '60%'
          },
          {
            name: '负荷',
            type: 'bar',
            data: [],
            barGap: '-75%',
            barWidth: '30%',
          }
        ]
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.barChartOptions.series[0].data = [20, 62, 200, 894, 790, 450, 720]
      this.barChartOptions.series[1].data = [17, 59, 190, 870, 760, 430, 650]
      this.barChartOptions.xAxis[0].data = [
        "动作片",
        "动画片",
        "电视剧",
        "纪录片",
        "综艺片",
        "伦理片",
        "恐怖片",
      ]
      this.createBarEchart()
    },
    createBarEchart() {
      this.myBarChart = this.$echarts
        .init(this.$refs.barChart)
        .setOption(this.barChartOptions);
      // window.addEventListener("resize", () => {
      //   this.myBarChart.resize();
      // });
    },
  }
}
</script>

<style lang="less" scoped>
.components-page {
  .title-bg {
    background: url("../../../assets/images/title-bg.png") no-repeat top center;
    background-size: 100% 100%;
    font-size: 16px;
    padding: 4px 10px;
    text-align: left;
    width: 160px;
    margin: 10px;
    color: #ffffff;
  }

  .barChart {
    width: 100%;
    height: 2.841667rem;
  }
}
</style>
